<template>
  <div class="my-host">
    <a-card title="管理员信息">
      <div class="my-host-info">
        <div class="my-host-info-left">
          <img src="../../assets/img/avatar.jpg"
               alt="avatar"
               class="my-host-info-left-img">
        </div>
        <div class="my-host-info-right">
          <div v-for="(item, i) in userInfo"
               :key="i">
            <div class="my-host-info-right-label">
              {{ item.label }}
              <a-icon type="question-circle"
                      v-if="item.label === '权限等级'"
                      style="font-size: 14px;margin-left: -10px;position:absolute;"
                      title="点击查看 权限等级 详情"
                      @click="visible = true"/>
              :
            </div>
            <div class="my-host-info-right-value">{{ item.value }}</div>
            <br>
          </div>
          <a-button class="change-info" type="primary">修改信息</a-button>
        </div>
      </div>
    </a-card>
    <a-modal v-model="visible"
             title="权限等级详情">
      <template slot="footer">
        <a-button type="primary" @click="visible = false">确认</a-button>
      </template>
      <a-table :columns="columns"
               :data-source="data"
               :pagination="false"></a-table>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "MyHost",
  data() {
    return {
      userInfo: [
        {label: '编号', value: '123'},
        {label: '用户名', value: 'administrator'},
        {label: '权限等级', value: 'IV'},
      ],
      visible: false,
      columns: [
        {
          dataIndex: 'name',
          key: 'name',
          slots: {title: 'customTitle'},
          scopedSlots: {customRender: 'name'},
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          scopedSlots: {customRender: 'tags'},
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: {customRender: 'action'},
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ],
    }
  }
}
</script>

<style lang="scss">
.my-host {
  .ant-card-head-title {
    font-weight: bolder;
    font-size: 20px;
    padding: 12px 0;
  }

  .my-host-info {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .my-host-info-left {
      width: 200px;

      .my-host-info-left-img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 4px solid #aaaaaa;
      }
    }

    .my-host-info-right {
      width: calc(100% - 200px);

      .my-host-info-right-label {
        width: 140px;
        margin-right: 20px;
        text-align: right;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 2px;
        display: inline-block;
      }

      .my-host-info-right-value {
        width: calc(100% - 160px);
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        display: inline-block;
      }

      .change-info {
        margin-top: 20px;
        margin-left: 160px;
      }
    }
  }

}
</style>